<template>
  <div class="nav-mobie">
    <div class="nav-mobie-menu" @click="openMenu">
      <n-icon size="40">
        <ReorderFourOutline />
      </n-icon>
    </div>
    <div class="nav-mobie-logo">
      <img src="../../../assets/images/logo.svg" alt="logo">
      <h1 class="kaiti">云笔记</h1>
    </div>
    <div class="nav-mobie-search">
      <n-icon size="40">
        <SearchOutline />
      </n-icon>
    </div>
    <n-drawer v-model:show="show" :width="200" placement="left" class="mobile-drawer">
      <n-drawer-content  closable>
        <ul class="nav-mobie-search_menu">
          <li
            v-for="(item) in list" 
            :key="item.id"
            :class="item.menuType == '1'?'active':''"
            @click="topMenuTo(item)">
            {{item.menuTitle}}
          </li>
        </ul>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script setup lang="ts">
import { SearchOutline,ReorderFourOutline } from '@vicons/ionicons5'
import { getTopMenuData } from "../../../service/api/topMenu"
let show = ref(false)
let list = ref()
const openMenu = () => {
  show.value =!show.value
}
const topMenuTo = (item:any) => {
  list.value = list.value.map(i =>{
    if(i.id == item.id){
      i.menuType = '1'
    } else {
      i.menuType = '0'
    }
    return i
  })
}
const getData = async () => {
  try {
    await nextTick()
    let res: any = await getTopMenuData({})
    let data = res.data._value
    if(data){
      console.log(data) 
      list.value = data.data
    }
  } catch (error) {
    console.log(error)
  }
}
onBeforeMount(()=>{
  getData()
})
</script>

<style  lang="scss">
.nav-mobie{
  position: fixed;
  top: 0;
  left: 0;
  width: 96%;
  padding: 0 2%;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 8px $yun-layer-3-fill;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-logo{
    display: flex;
    align-items: center;
    img{
      width: 30px;
      height: 30px;
    }
    h1{
      font-size:26px;
      margin-left: 10px;
    }
  }
  &-menu{
    cursor: pointer;
  }
  &-search{
    cursor: pointer;
    &_menu{
      li{
        height: 40px;
        cursor: pointer;
        padding: 4px 0 4px 10px;
        line-height: 40px;
      }
      li:hover{
        border-right: 2px solid $yun-color;
        background-color: $yun-color-focus;
        color:#fff;
      }
      .active{
        border-right: 2px solid $yun-color;
        background-color: $yun-color-focus;
        color:#fff;
      }
    }
  }
  .n-drawer .n-drawer-content {
    padding-top: 15%;
    height: 85%;
    display: flex;
    flex-direction: column;
  }
}
.mobile-drawer .n-drawer-content .n-drawer-body-content-wrapper{
  padding: 20px 0 !important;
}
</style>